<template>
  <view class="strongUsher">
    <view class="main-box" @click="showCardDetail(message.itineraryCard.itineraryId)">
      <view class="card-mask"></view>
      <img
        v-if="message.itineraryCard.mainPicture"
        class="mainPicture"
        :src="message.itineraryCard.mainPicture"
        mode="aspectFill"
      />
      <img
        v-else
        class="mainPicture"
        src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/trip-back-1.png"
        mode="aspectFill"
      />
      <view
        class="itineraryTitle omit2"
        :class="{ active: message.itineraryCard.mainPicture }"
        >{{ message.itineraryCard.itineraryTitle }}</view
      >
    </view>
    <view class="btn-list-box" v-if="message.itineraryCard.showButton">
      <view
        class="btn-2"
        @click="showCardDetail(message.itineraryCard.itineraryId)"
        :data-spmCntSuffix="'ChatAiPage.message@2.detail@1'"
        :data-custom="1"
        :data-spm="1"
        >查看详细攻略</view
      >
      <view
        class="btn-1"
        :data-spmCntSuffix="'ChatAiPage.message@2.product@1'"
        :data-custom="1"
        :data-spm="1"
        >行程商品</view
      >
    </view>
  </view>
</template>

<script>
export default {
  props: {
    message: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  watch: {},
  methods: {
    // 查看更多详情
    showCardDetail(dspId) {
      uni.$emit("showModal2", { dspId: dspId, type: 2, dspStatus:false });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.strongUsher{
  background: rgba(255,255,255,0.4);
  border-radius: 8rpx 26rpx 26rpx 26rpx;
  border: 4rpx solid #FFFFFF;
  color: $sl-color-grey;
  padding: 20rpx;
  margin-top: 24rpx;
  z-index: -1;
  .main-box{
    width: 100%;
    height: 290rpx;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .card-mask{
      width: 100%;
      height: 225rpx;
      bottom: 0;
      left: 0;
      z-index: 1;
      background: linear-gradient( 180deg, rgba(238,238,238,0) 0%, rgba(41,41,41,0.5) 100%);
      position: absolute;
      border-radius: 0 0 26rpx 26rpx;
    }
    .mainPicture{
      width: 100%;
      height: 290rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      border-radius: 26rpx;
    }
    .itineraryTitle{
      z-index: 1;
      font-size: 36rpx;
      font-weight: 600;
      line-height: 52rpx;
      color: #FFFFFF;
    }
    .itineraryTitle.active{
      font-size: 36rpx;
    }
  }
  .btn-list-box{
    // width: 454rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24rpx;
    font-weight: 600;
    .btn-1{
      width: 317rpx;
      height: 80rpx;
      background: #B4EF4E;
      border-radius: 16rpx;
      text-align: center;
      line-height: 80rpx;
      color: $sl-color-black;
    }
    .btn-2{
      width: 317rpx;
      height: 80rpx;
      background: $sl-color-grey-white;
      border-radius: 16rpx;
      text-align: center;
      line-height: 80rpx;
      color: $sl-color-black;
    }
  }
}
</style>
